<template>
  <view>
    <!-- 导航栏 -->
    <!-- <up-navbar back-text="" title=""></up-navbar> -->
    <view class="page">
      <!-- 标题 -->
      <view class="logo">Deep Operate</view>
      <!-- 标题 -->
      <view class="title">{{ registerType == 'direct' ? '直客' : '渠道' }}注册</view>
      <!-- 表单 -->
      <up-form :model="form" ref="formRef" labelPosition="top" :rules="rules" labelWidth="60px">
        <up-form-item label="" prop="invitationCode">
          <template #label>
            <view class="label flex">
              <view class="label-left">邀请码</view>
              <view class="label-right" @click="switchModus">{{ registerType == 'direct' ? '渠道' : '直客' }}注册</view>
            </view>
          </template>
          <up-input v-model="form.invitationCode" placeholder="请输入您的邀请码" class="ipt" />
        </up-form-item>
        <up-form-item label="企业主体名称" prop="business" labelWidth="100px" v-if="registerType == 'channel'">
          <up-input v-model="form.business" placeholder="请输入您的企业主体名称" class="ipt" />
        </up-form-item>
        <up-form-item label="手机号" prop="mobile">
          <up-input v-model="form.mobile" placeholder="请输入手机号" class="ipt" />
        </up-form-item>
        <up-form-item label="邮箱" prop="email">
          <up-input v-model="form.email" placeholder="请输入邮箱" class="ipt" />
        </up-form-item>
        <up-form-item label="密码" prop="password">
          <up-input v-model="form.password" placeholder="不少于8位,字母/数字至少2种" :type="passwordVisible ? 'text' : 'password'"
            class="ipt password">
            <template #suffix>
              <up-icon :name="passwordVisible ? 'eye-fill' : 'eye-off'" color="#4050b5" size="20" :color="'#999'"
                @click="showPassword"></up-icon>
            </template>
          </up-input>
        </up-form-item>
        <up-form-item label="手机验证码" prop="code" labelWidth="100px">
          <up-input v-model="form.code" placeholder="请输入验证码" class="ipt">
            <template #suffix>
              <send-verification-code :mobile="form.mobile" :checked="checked"></send-verification-code>
            </template>
          </up-input>
        </up-form-item>
      </up-form>
      <!-- 登录按钮 -->
      <view class="btn">
        <up-button :custom-style="customStyle" type="primary" @click="submitForm" ripple text="注册"></up-button>
      </view>
      <!-- 注册 -->
      <view class="tips flex">
        <view class="tips-left">已注册?<text @click="goBack">登录</text></view>
      </view>
      <!-- 协议 -->
      <view class="agreement">
        <up-checkbox-group>
          <up-checkbox v-model="checked" active-color="#4050b5" size="12" @change="checkedChange"></up-checkbox>
        </up-checkbox-group>
        <view class="agreement-text">我已阅读并同意 <text @click="showAgreementDialog">用户协议</text> 与 <text
            @click="showAgreementDialog">隐私政策</text>
        </view>
      </view>
    </view>
    <!-- 弹框 -->
    <agreement ref="agreementRef" />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import agreement from '../components/agreement.vue'
const form = reactive({
  mobile: '',
  code: '',
  email: '',
  password: '',
  invitationCode: '',
  business: ''
})
// 是否同意协议弹框
const checked = ref(false)
// 协议弹框
const agreementRef = ref()
// sms: 手机登录, email: 邮箱登录
const registerType = ref('direct')
// 密码是否可见
const passwordVisible = ref(false)
const customStyle = ref({
  background: '#4050b5',
  color: '#fff',
  borderColor: '#4050b5',

});
const formRef = ref(null)
const rules = ref({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, message: '密码至少8位，且包含字母和数字', trigger: 'blur' }
  ],
  // invitationCode: [
  //   { required: registerType.value === 'direct'? false : true, message: '请输入邀请码', trigger: 'blur' }
  // ],
  invitationCode: [
    {
      validator: (rule, value, callback) => {
        if (registerType.value !== 'direct' && !value) {
          callback(new Error('请输入邀请码'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
  business: [
    { required: true, message: '请输入企业主体名称', trigger: 'blur' }
  ]
})
// 切换登录方式
const switchModus = () => {
  registerType.value = registerType.value == 'direct' ? 'channel' : 'direct'
}
// 跳转注册页面
const goBack = () => {
  uni.navigateBack()
}
// 显示协议弹框
const showAgreementDialog = () => {
  agreementRef.value.showModus()
}
// 同意协议
const checkedChange = (e) => {
  console.log(e);
  checked.value = e
}
// 显示密码
const showPassword = () => {
  passwordVisible.value = !passwordVisible.value
}
// 验证表单
const validateForm = () => {
  formRef.value?.validate().then(valid => {
    if (valid) {
      console.log('校验通过', form.value);
    } else {
      console.log('校验失败', form.value);
      return false;
    }
  }).catch((e) => {
    console.log('e', e);
  });
};

const submitForm = () => {
  validateForm()
}

// 组件挂载后设置验证规则
// onMounted(() => {
// 	formRef.value.setRules(rules.value)
// })
</script>
<style lang="css">
.u-border,
.up-border {
  border: none !important;
  border-style: none !important;
}
</style>
<style lang="scss" scoped>
.page {
  padding: 40rpx 30rpx 40rpx 30rpx;
  background: #f6f6f6;
  min-height: 100vh;
}

.logo {
  font-size: 50rpx;
  font-weight: 600;
  color: #4050b5;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 20rpx;

}

.ipt {
  border-radius: 8rpx;
  background: #fff;
  width: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  margin-top: 60rpx;
}

.tips {
  margin-top: 40rpx;
  font-size: 28rpx;

  .tips-left {
    color: #999;

    text {
      color: #4050b5;
    }
  }

  .tips-right {
    color: #4050b5;
  }
}

.agreement {
  margin-top: 140rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  .agreement-text {
    font-size: 22rpx;
    color: #999;

    text {
      color: #4050b5;
    }
  }
}

.password {
  padding-right: 10rpx;
}

.code {
  padding-right: 20rpx;
}

.label {
  color: #303133;
  font-size: 15px;
  margin-bottom: 15rpx;

  .label-right {
    color: #4050b5;
  }
}
</style>
